// 导入React
import React from "react";

// 列表渲染
function App() {
  // 列表数据-普通数组
  const data = [1, 2, 3];
  // 列表数据-JSX数组
  const books1 = [<li>React</li>, <li>Vue</li>];
  // 列表数据-服务器返回
  const books2 = [
    { id: 1, name: "React" },
    { id: 2, name: "Vue" },
  ];
  // 数组转换
  const books3 = books2.map(item => <li key={item.id}>{item.name}</li>)
  return (
    <div>
      {/* 嵌入数组 */}
      {data}
      {books1}
      {books3}
      {/* 直接调用数组map方法 */}
      {books2.map(item => <li key={item.id}>{item.name}</li>)}
    </div>
  );
}

export default App;
